<template>
	<view class="oredr_card">
		<view class="u-flex u-flex-1  u-flex-between">
			<view class="u-flex u-m-b-30">
				<Format :format="profileOrder.format" />
				<view class="f-s-16 u-m-l-20 f-w-b u-line-1 u-line-1">{{profileOrder.title }}</view>
			</view>
			<orderStatus :status="profileOrder.status" />
		</view>
		<view class="u-flex u-flex-1 u-flex-between">
			<Price :price="profileOrder.price" />
			<block v-if="profileOrder.status=='Paid'">
				<view class="sub-title-two">支付时间：{{profileOrder.payAt}}</view>
			</block>
			<view v-else class="sub-title-two">下单时间：{{profileOrder.createAt}}</view>
		</view>
		<u-divider></u-divider>
		<view class="u-flex u-flex-1 u-flex-between u-flex-items-center">
			<view class="sub-title-two">订单号：{{profileOrder.orderNo}}</view>
			<view >
				<u-button color="#666" shape="circle" text="查看详情" size="small"
					:customStyle="{ width: '70px' }" @click="goOrderDetail"></u-button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		defineProps
	} from 'vue';
	import Format from '@/components/common/format.vue'
	import orderStatus from '@/components/order/order_status.vue'
	import tag from "../components/common/tag.vue"
	import Price from '@/components/common/price.vue'
	const props = defineProps({
		profileOrder: Object
	})
	function goOrderDetail(){
		uni.navigateTo({
			url:'/subPackages/order/order_detail?orderNo='+ props.profileOrder.orderNo
		})
	}
</script>

<style lang="scss">
	.oredr_card {
		margin: 10px;
		background-color: #fff;
		border-radius: 8px;
		padding: 12px;
	}
</style>